<template>
  <div class="table_bd">
    <!-- 搜索条件 -->
    <div class="header">
      <HPlainButton @click="onShowSysUpgrade">导出</HPlainButton>
      <div class="search">
        <div class="date-range">
          <!-- 开始日期 -->
          <div class="start-date">
            <el-date-picker
              v-model="startDate"
              type="date"
              placeholder="开始日期"
              value-format="YYYY-MM-DD"
              style="width: 100%"
            />
          </div>
          <span style="line-height: 28px">~</span>
          <!-- 结束日期 -->
          <div class="end-date">
            <el-date-picker
              v-model="endDate"
              type="date"
              placeholder="结束日期"
              value-format="YYYY-MM-DD"
              style="width: 100%"
            />
          </div>
        </div>
        <el-input v-model.trim="input" placeholder="检索" class="input-with-select">
          <template #prepend>
            <el-select v-model="select" class="w100" placeholder="选择">
              <el-option class="center" label="工单编号" value="1" />
              <el-option class="center" label="工单编号" value="2" />
              <el-option class="center" label="工单编号" value="3" />
            </el-select>
          </template>
          <template #append>
            <el-button :icon="Search" @click="onShowSysUpgrade" />
          </template>
        </el-input>
      </div>
    </div>
    <div class="table">
      <el-table
        border
        stripe
        resizable
        :data="tableData"
        height="100%"
        style="width: 100%; position: absolute"
      >
        <el-table-column
          show-overflow-tooltip
          type="index"
          :index="indexMethod"
          label="序号"
          width="50"
        />
        <el-table-column show-overflow-tooltip prop="date" label="类型" width="200" />
        <el-table-column show-overflow-tooltip prop="name" label="时间" width="200" />
        <el-table-column show-overflow-tooltip prop="state" label="金额" width="120" />
        <el-table-column show-overflow-tooltip prop="city" label="余额" width="120" />
        <el-table-column show-overflow-tooltip prop="city" label="备注" />
        <el-table-column show-overflow-tooltip prop="date" label="流水编号" width="200" />
      </el-table>
    </div>
    <div class="footer">
      <div class="pagina">
        <Pagination />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import Pagination from '@/components/Pagination/index.vue'
  import { ref } from 'vue'
  import { Search } from '@element-plus/icons-vue'
  import HPlainButton from '@/components/common/button/HPlainButton.vue'
  import { ElMessage } from 'element-plus'

  const onShowSysUpgrade = () => {
    ElMessage({
      type: 'success',
      message: '正在升级维护中，敬请期待...',
    })
  }

  //列表序号
  const indexMethod = (index: number) => {
    return (index + 1) * 1
  }

  // 开始日期
  const startDate = ref('')

  // 结束日期
  const endDate = ref('')

  // 关键词
  const input = ref('')

  // 自定义字段
  const select = ref('')
  const shortcuts = [
    {
      text: '上周',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        return [start, end]
      },
    },
    {
      text: '上个月',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        return [start, end]
      },
    },
    {
      text: '上 3 个月',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
        return [start, end]
      },
    },
  ]
  const tableData = [
    {
      date: '20230602590500824',
      name: '2016-05-02',
      state: 'California',
      city: '自动派单测试',
      address: 'No. 189, Grove St, Los Angeles',
      zip: '广西壮族自治区-百色市-隆林各族自治县--东门东街道18号',
      tag: 'Home',
    },
    {
      date: '20230602590500824',
      name: '2016-05-02',
      state: 'California',
      city: '自动派单测试',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-03',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-03',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
  ]
</script>
<style lang="scss" scoped>
  @import './index.scss';
</style>
